<template>
  <div :style="bottomStaySpace()" class="wrap">
    <div class="schedule_title">{{ form.name }}</div>
    <div class="schedule_text mt24">
      <Icon name="icon-shijian1" size="22" />
      <span class="ml10">{{ form.beginTimeText }} - {{ form.endTimeText }}</span>
    </div>
    <div class="mt28">
      <div class="flex_start_cen mb12">
        <span class="star">*</span>
        <span class="sub_title">活动小结</span>
      </div>
      <div style="width: 660rpx">
        <up-textarea v-model.trim="form.record" height="130" maxlength="200" />
      </div>
    </div>
    <div class="mt20">
      <div class="flex_start_cen">
        <span class="star">*</span>
        <span class="sub_title">活动图片/视频上传</span>
      </div>
      <div class="uploadTip mb12">微信邀请截图、现场活动照片、线上会议截图、参会反馈截图</div>
      <UploadImgVideo :default-file="form.attachment" :multiple="true" limit-count="10" limit-size="50" update @file="form.attachment = $event" @uploading="isUploading = $event" />
      <div class="uploadTip">请上传至少一张图片，最多10个文件， 单个最大50M</div>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :disabled="!canSubmit" size="L" @confirm="submitFn">提交</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Icon from '@C/Icon.vue'
import { computed, reactive, ref } from 'vue'
import UploadImgVideo from '@C/UploadImgVideo.vue'
import { bottomStaySpace, keepBottomSafeDis, onLoad, onUnload, Router } from '@U/common'
import Button from '@C/Button.vue'
import { createScheduleRecords, updateScheduleRecords } from '@P_GL/activitySchedule/request'

const isUploading = ref(false)
const form = reactive({
  eventId: '',
  id: '',
  name: '',
  beginTimeText: '',
  endTimeText: '',
  record: '现场气氛：\n'
      + '\n'
      + '活动内容对你的帮助：\n'
      + '\n'
      + '互动效果：',
  attachment: [],
})
// 去除活动小结的标题和换行符后判断用户是否填写
const canSubmit = computed(() => form.record?.replace(/现场气氛：|活动内容对你的帮助：|互动效果：/g, '')?.replace(/\n/g, '')?.length > 0
    && (form.attachment.length > 0 && !isUploading.value))
const submitFn = async () => {
  if (!canSubmit.value) return
  let res = {}
  if (form.id) res = await updateScheduleRecords(form).finally(() => {})
  else res = await createScheduleRecords(form).finally(() => {})
  if (res?.code === 200) {
    Router.back()
    uni.$emit('getScheduleDetailsFn')
  }
}
onLoad((options) => {
  const scheduleRecords = JSON.parse(options.scheduleRecords)
  if (scheduleRecords.eventScheduleDetailId === '0') {
    form.name = scheduleRecords.name
    form.beginTimeText = scheduleRecords.beginTimeText
    form.endTimeText = scheduleRecords.endTimeText
  } else {
    for (const key in form) {
      form[key] = scheduleRecords[key]
    }
    form.id = scheduleRecords.eventScheduleDetailId
  }
  form.eventId = scheduleRecords.id
})
onUnload(() => {
  uni.$off('getScheduleDetailsFn')
})
</script>

<style lang="less" scoped>
.wrap {
  padding: 24rpx;
  background-color: #fff;
  .schedule_title {
    font-weight: 500;
    font-size: 48rpx;
    color: rgba(0,0,0,0.85);
    line-height: 58rpx;
    margin-bottom: 28rpx;
  }
  .schedule_text {
    font-weight: 400;
    font-size: 28rpx;
    color: #8C8C8C;
    line-height: 40rpx;
  }
  .star {
    width: 18rpx;
    height: 50rpx;
    line-height: 58rpx;
    font-size: 40rpx;
    color: #FF5657;
    margin-right: 2rpx;
  }
  .sub_title {
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>
